<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="assets/bundle.element.css">
    <!--全局css-->
    <link rel="stylesheet" href="style.css">
    <style>
        html,
        body {
            height: 100%;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }

        .el-container {
            border: solid 0px red;
        }

        .el-header {
           background: #1cbbb4;
            color: #333;
            height: 70px !important;
            padding: 0px;
        }

        .el-aside {
            background-color: ghostwhite;
            color: #fff;

        }

        .el-main {
            background-color: #F0F2F6;
            color: #333;
            padding: 0px;
            overflow: hidden;
            position: relative;
        }

        .btn-full {
            display: inline-block;
            position: absolute;
            right: 250px;
            top: 15px;
            border: solid 0px red;
            z-index: 10000;
            color: #fff;
        }
       .sidebar{
           -webkit-transition: -webkit-transform .3s ease-in-out,width .3s ease-in-out;
           transition: transform .3s ease-in-out,width .3s ease-in-out;
       }
        .page{
            display: none;
        }
    </style>
</head>
<body>

<div class="page" id="page-index">

    <el-container v-bind:style="{height:height+'px'}">
        <el-header>
            <site-header v-bind:title="title"></site-header>
        </el-header>
        <el-container>
            <el-aside v-bind:style="{width:width+'px',height:(height-70)+'px'}" class="sidebar" >
                <site-menu v-on:click-menu="onClickMenu" v-if="menuView"></site-menu>
                <div @click="toggleFull" id="menu-toggle"><a  href="javascript:;" data-toggle="offcanvas" role="button" class="sidebar-toggle"><i :class="width==0?'el-icon-caret-right':'el-icon-caret-left'" style="color:#a5673f"></i></a></div>
            </el-aside>
            <el-main>
                <site-tab ref="siteTab" v-bind:newtab="newTabPage" v-bind:max=99></site-tab>
            </el-main>
        </el-container>
    </el-container>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="40%">
        <el-form :model="form" ref="form">
            <el-form-item label="原密码" :label-width="formLabelWidth" prop="oldPass"
                          :rules="[
                                     {required:true,message:'请输入原密码,内容不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.oldPass" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPass"
                          :rules="[
                                     {required:true,message:'请输入新密码,内容不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.newPass" type="password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth" prop="newPass1"
                          :rules="[
                                     {required:true,message:'请输入确认密码,内容不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.newPass1" type="password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onChangePwd()">确 定</el-button>
        </div>
    </el-dialog>
</div>


<script type='text/javascript' src='assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='js/component.js' charset='utf-8'></script>

<script>

    var vuePageIndex = new Vue({
        el: '#page-index',
        data: {
            userNo: '12312',
            password: '',
            height: 500,
            width: 0,
            title: '',
            formLabelWidth: '120px',
            newTabPage: {
                title: '',
                url: ''
            },
            form: {},
            dialogFormVisible: false,
            menuView:true,
        },
        methods: {
            toggleFull: function () {
                if (this.width == 200){
                    this.width = 0;
                    $('#menu-toggle').css('left',"0px");
                }else {
                    this.width = 200;
                    $('#menu-toggle').css('left',"200px");
                }
            },
            refreshPages: function () {
                let param = this.newTabPage;
                this.newTabPage = {};
                this.newTabPage = param;
            },
            refreshMenu:function(){
                 this.menuView = false;
                 setTimeout(()=>{
                     this.menuView = true;
                 },10)
            },
            onChangePwd() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.form.Id = SiteConfig.account.id;
                        if (this.form.newPass != this.form.newPass1) {
                            this.$message({
                                type: 'error',
                                message: '两次密码输入的不对'
                            })
                            return;
                        }
                        HttpUtil.get('User/changePassword', this.form).success((res) => {
                            if (res.state == 0) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功'
                                });
                                this.dialogFormVisible = false
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.errMsg
                                });
                            }

                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '输入内容不能为空'
                        })
                    }
                });
            },
            onClickMenu(page) {
                //alert(page.url);

                this.newTabPage = {
                    title: page.title,
                    url: page.url
                };
            }
        },
        created: function () {
            $('.page').show();
            this.height = window.innerHeight;
            this.title = '智慧校园安全防范平台';
            document.title = '智慧校园安全防范平台';
            this.title = SiteConfig.account.userName;
            if (!isLogined()) {
                location.href = "login.html";
            } else {

                    this.newTabPage = {
                        title: '系统首页',
                        url: 'pages/prevention/main.html'
                    };

            }
        },
        mounted: function () {
            var _self = this;
            window.onresize = function () {
                _self.height = window.innerHeight;
            };
        }
    });


</script>

</body>
</html>
